<template>
  <el-date-picker
    v-model="tempTimeVal"
    align="right"
    type="date"
    :editable="editable"
    :placeholder=placeholder
    value-format="yyyy-MM-dd"
    :picker-options="pickerOptions"
    size="small"
    @change="handleChange"
  >
  </el-date-picker>
</template>

<script>
export default {
  name: 'timeSelector',
  props: {
    timeVal: String,
    placeholder: {
      type: String,
      default: '选择时间'
    },
    editable: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      // tempTimeVal: this.timeVal,
      tempTimeVal: this.tempTimeVal
    }
  },
  methods: {
    handleChange(e) {
      this.$emit('input', e)
    }
  }
}
</script>

<style scoped>

</style>
